<template>
  <div class="container">
      <div class="btnClose">
            <span class="iconfont iconicon-test"></span>
        </div>
        <div class="logo">
            <span class="iconfont iconnew"></span>
        </div>
        <myipt 
        type='text'
        placeholder='用户名/手机号码' 
        :rule='/^1[3456789]\d{9}$/'  
        msg='请输入正确的有效数字'
        @valchange='setusername'
        ></myipt>
        <myipt 
        type='text'
        placeholder='昵称'  
        :rule='/^\w{3,5}$/' 
        msg='请输入一个好听到爆炸的名字吧'  
        @valchange='setnickname'   
        ></myipt>
        <myipt
         type='password'
         placeholder='密码' 
         :rule='/^\d{6}$/' 
         msg='请输入6位数字的密码'  
         @valchange='setpassword'   
        ></myipt>
        <mybtn  
        btntext='注册'
        @clicked='register'
        ></mybtn>
  </div>
</template>

<script>
import mybtn from '../components/mybtn'
import myipt from '../components/myinput'
export default {
    data(){
        return {
            username:'',
            nickname:'',
            password:''
        }
    },
    components:{
        mybtn,
        myipt
    },
    methods:{
        setusername(data){
           this.username=data
        },
        setnickname(data){
            this.nickname=data
        },
        setpassword(data){
            this.password=data
        },
        register(){
            console.log(this.username);
            console.log(this.nickname);
            console.log(this.password);
            this.$axios(
                {url:'/register',
                method:'post',
                data:{
                    username:this.username,
                    password:this.password,
                    nickname:this.nickname
                },
                }).then((res)=>{
                    console.log(res);
                    alert(res.data)
                })
        }     
    }
    


}
</script>

<style lang='less' scoped>
@import url('http://at.alicdn.com/t/font_1426139_h6vn3jbl5q.css');
.container {
    padding: 24/360*100vw;
}
.btnClose {
    .iconfont {
        font-size: 28/360*100vw;
    }
}
.logo {
    text-align: center;
    .iconfont {
        font-size: 126/360*100vw;
        color: #d81e06;
    }
}


</style>